<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../js/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../js/swiper/swiper-4.1.0.min.css">
    <link rel="stylesheet" href="../../css/flex-box.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/index.css">
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 200px;
        height: 200px;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 50px;
        color: #8c939d;
        line-height: 178px;
        text-align: center;
        width: 80px;
        height: 80px;
        margin-top: 59px;
    }

    .avatar {
        width: 199px;
        height: 199px;
        display: block;
    }

    .el-upload input {
        display: none !important;;
    }
</style>
<body>

<div id="app">
    <div class="header">
        <div class="nav">
            <div class="nav-bar">
                <div class="nav-left">
                    <ul>
                        <li>
                            <a href="">关于我们</a>
                        </li>
                        <li><a href="">新闻</a></li>
                        <li><a href="">赞助方</a></li>
                        <li><a href="">会员</a></li>
                        <li><a href="">企业购</a></li>
                    </ul>
                </div>
                <div class="nav-right">
                    <ul>
                        <li><a href="/browser/page/register.html" v-if="!form.userName">注册</a></li>
                        <li><a style="color: #FE8C00" @click="login()" v-if="!form.userName">立即登录</a></li>
                        <li><span style="color: #FE8C00;left:23px;position: relative" @click="loginOut()"
                                  v-if="form.userName">{{form.userName}}</span></li>
                        <li><a v-if="form.userName" @click="loginout()">退出</a></li>
                        <li><a>我的订单</a></li>
                        <li>
                            <a class="mobile">手机端<img src="../../image/index-img/下拉.png"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layout">
            <div class="layout-in">
                <div class="left">
                    <div class="logo">
                        <a title="阿丁餐评" href="/" class="logo-food">
                            <img src="../../image/foodLogo.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mid">
        <div id="basic-inf" style="height: 200px">
            <h1 class="shop-name">{{foodList[0].categoryName}}&nbsp;&nbsp;<span
                    style="font-size: 20px">评分:{{foodList[0].score}}</span></h1>
            <div class="address1">
                <span>地址：{{foodList[0].address}}</span>
            </div>
            <div class="address1">
                <span>电话：{{foodList[0].phone}}</span>
            </div>
        </div>
        <div id="selfEval">
            <el-form ref="form" :model="form">
                <div class="title">我要评价</div>
                <div class="Eval" style="width: 292px;height: 57px;">
                    <div class="rc-rate-name">总体评价
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;">
                        <el-input v-model="form.rating" type="number" step="0.1" max="5" min="0"></el-input>
                    </div>
                </div>
                <div class="Eval" style="width: 292px;height: 57px;">
                    <div class="rc-rate-name">口味
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;">
                        <el-input v-model="form.taste" type="number" step="0.1" max="5" min="0"></el-input>
                    </div>
                </div>
                <div class="Eval" style="width: 292px;height: 57px;">
                    <div class="rc-rate-name">环境
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;">
                        <el-input v-model="form.envior" type="number" step="0.1" max="5" min="0"></el-input>
                    </div>
                </div>
                <div class="Eval" style="width: 292px;height: 57px;">
                    <div class="rc-rate-name">服务
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;">
                        <el-input v-model="form.servi" type="number" step="0.1" max="5" min="0"></el-input>
                    </div>
                </div>
                <div class="Eval" style="width: 859px;height: 200px;">
                    <div class="rc-rate-name">评价
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;width: 600px;height: 200px">
                        <el-input
                                v-model="form.content" type="textarea" placeholder="亲，该店的体验怎么样，服务还满意吗" maxlength="200"
                                :autosize="{ minRows: 8, maxRows: 10}" show-word-limit
                        ></el-input>
                    </div>
                </div>
                <div class="Eval" style="width: 859px;">
                    <div class="rc-rate-name">
                        图片/视频
                    </div>
                    <div style="font-size: 19px; ">
                        <div v-if="imageUrl===''">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/common/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                                    multiple
                            >
                             <!--   <img :src="item" class="avatar">-->
                                <i v-if="imageUrl===''" class="el-icon-plus avatar-uploader-icon"></i>
                              <!--  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>-->
                            </el-upload>
                        </div>
                        <div v-else style="display: flex;flex-wrap: wrap">
                            <div v-for="item in imageUrls">
                                <el-upload
                                        class="avatar-uploader"
                                        action="/common/upload"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload"
                                        ::on-remove="handleRemove"
                                        multiple
                                >
                                    <img :src="item" class="avatar">
                                    <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
                                    <!--    <i  class="el-icon-plus avatar-uploader-icon"></i>-->

                                </el-upload>
                            </div>
                        </div>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
                    </div>
                </div>
                <div class="Eval" style="width: 363px;height: 57px;">
                    <div class="rc-rate-name">人均
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;display: flex;line-height: 2;">
                        <el-input v-model="form.money" type="number" step="1" min="0"></el-input>
                        <span style="font-size: 19px;margin-left: 5px">元</span>
                    </div>
                </div>
                <div class="Eval" style="width: 363px;height: 57px;">
                    <div class="rc-rate-name">喜欢的菜
                        <em class="rc-rate-required">*</em>
                    </div>
                    <div style="font-size: 19px;display: flex;line-height: 2;">
                        <el-input v-model="form.likeDish"></el-input>
                    </div>
                </div>
                <div class="warn">
                    评价和打分都将是其他网友的参考依据，并影响该商户评价。
                    请发布真实、客观的本人消费体验评价。如您收到威逼、利诱如优惠等干扰而发布的评价或并非本人体验的虚假/恶意评价，则评价视为违规，同时影响您的信誉度。
                </div>
                <div class="Eval">
                    <div style="margin-left: 137px">
                        <el-button type="warning" plain @click="sub">发表评论</el-button>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</div>

</body>
<script src="../../js/vue.js"></script>
<script src="../../js/common.js"></script>
<script src="../../plugins/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/login.js"></script>
<script src="../../api/category.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                storeId: '',
                foodList: {},
                form: {
                    rating: '',
                    taste: '',
                    envior: '',
                    servi: '',
                    userId: '',
                    userName: '',
                    content: '',
                    image: '',
                    money: '',
                    likeDish: '',
                    categoryId: '',
                },
                uploadFiled: [],
                imageUrls: [],
                imageUrlsFlag:true,
                imageUrl: '',
            }
        },
        created() {
            //parseUrl 获取url上的参数
            this.storeId = parseUrl(decodeURI(location.search)).categoryId
            this.form.categoryId = this.storeId
            const userName = window.localStorage.getItem('user')
            if (userName) {
                this.form.userName = JSON.parse(userName).name
                this.form.userId = JSON.parse(userName).id
            }
            this.initData()
        },
        methods: {
            async initData() {
                await getStoreInfoByCategoryId(this.storeId).then(res => {
                    this.foodList = res.data
                    console.log(this.foodList)
                })
            },
            /*图片上传*/
            handleAvatarSuccess(response, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.imageUrls.push(this.imageUrl)
                /*多文件上传*/
                this.uploadFiled.push(response.data)
                /*this.form.image = response.data*/
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            handleRemove(file){

            },
            sub() {
                this.form.image = this.uploadFiled.toString()
                console.log(this.form)
                addComment(this.form).then(res => {
                    if (res.code === 1) {
                        window.location.href = "evaluationStore.html?categoryId=" + this.storeId
                    } else {
                        this.$notify({type: 'warning', message: res.msg});
                    }
                })
                /*axios({
                    url:"http://localhost:8080/categoryComment",
                    method:"post",
                    data:this.form
                }).then(resp=>{
                    var r=resp.data;
                    if (r.code===1){
                        this.$message({
                            message:"r.msg",
                            type:"success",
                            duration:3000,
                            showClose:true
                        });

                        location.href="http://localhost:8080/emp/listPage"
                    }
                    else {
                        this.$message.error(r.msg)
                    }
                })*/
            }
        },
    })
</script>
</html>